<template>
  <header class="simple-header van-hairline--bottom">
    <i v-if="!isback" class="nbicon nbfanhui" @click="goBack"></i>
    <i v-else>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>
    <div class="simple-header-name">{{ name }}</div>
    <i class="nbicon nbmore" @click="handleShow"></i>
  </header>
  <van-popup v-model:show="showPopup" position="right">
    <van-button type="button" class="btn-primary" @click="handleLogout">退出</van-button>
  </van-popup>
  <div class="block" />
</template>

<script>
import { toRefs, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
export default {
  props: {
    name: {
      type: String,
      default: '',
    },
    back: {
      type: String,
      default: '',
    },
    noback: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['callback'],
  setup(props, ctx) {
    const isback = ref(props.noback)
    const router = useRouter()

    const state = reactive({
      showPopup: false,
    })

    const goBack = () => {
      if (!props.back) {
        router.go(-1)
      } else {
        var index = props.back.indexOf('?')
        if (index === -1) {
          router.push({ path: props.back })
        } else {
          var paramsStr = props.back.substr(index + 1, props.back.length)
          let query = {}
          if (getQueryString(paramsStr, 'applyType')) {
            query.applyType = getQueryString(paramsStr, 'applyType')
          }
          if (getQueryString(paramsStr, 'active')) {
            query.active = getQueryString(paramsStr, 'active')
          }
          router.push({ path: props.back, query: query })
        }
      }

      ctx.emit('callback')
    }

    const getQueryString = (url, name) => {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
      var r = url.match(reg)
      if (r != null) return unescape(r[2])
      return null
    }

    const handleShow = () => {
      // state.showPopup = !state.showPopup
    }

    const handleLogout = () => {
      sessionStorage.removeItem('token')
      let href = window.location.href
      if (href.includes('government')) {
        router.push({ path: '/login-government' })
      } else {
        router.push({ path: '/login-farmer' })
      }
    }
    return {
      ...toRefs(state),
      goBack,
      handleShow,
      handleLogout,
      isback,
    }
  },
}
</script>

<style lang="less" scoped>
@import '../common/style/mixin';
.simple-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  .fj();
  .wh(100%, 44px);
  line-height: 44px;
  padding: 0 10px;
  .boxSizing();
  color: #252525;
  background: #fff;
  .simple-header-name {
    font-size: 14px;
  }
}
.block {
  height: 44px;
}

.btn-primary {
  display: inline-block;
  white-space: nowrap;
  border: 1px solid #dcdfe6;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 400;
  padding: 5px 20px;
  font-size: 14px;
  border-radius: 7px;
  color: @fc;
  background: linear-gradient(90deg, #206dec, #359eff);
}
</style>
